<template>
  <div class="animate__animated animate__fadeInUp">
    <div class="datr">
      <p class="ga"></p>
      <span class="chryu animate__animated animate__fadeInUp">成员管理</span>
    </div>
    <el-card shadow="never">
      <div
        class="bigre animate__animated animate__fadeInUp animate__delay-0.9s"
      >
        <span>广告添加</span>
        <p>
          <el-row>
            <el-button @click="fanhui" size="small">返回</el-button>
          </el-row>
        </p>
      </div>
      <!-- 中间编辑框 -->
      <div class="d-flex j-center mt-3">
        <div class="biaoge" style="width: 500px">
          <el-form
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item label="广告名称" prop="name">
              <el-input v-model="ruleForm.name"></el-input>
            </el-form-item>
            <el-form-item label="广告位置" prop="region">
              <el-input v-model="ruleForm.region"></el-input>
            </el-form-item>
            <el-form-item label="点击次数" prop="num">
              <el-input v-model="ruleForm.num"></el-input>
            </el-form-item>
            <el-form-item label="开始时间" required>
              <div class="block d-flex">
                <el-date-picker
                  v-model="value1"
                  type="datetime"
                  placeholder="选择结束日期"
                  align="right"
                  :picker-options="pickerOptions"
                >
                </el-date-picker>
              </div>
            </el-form-item>
            <el-form-item label="到期时间" required>
              <div class="block d-flex">
                <el-date-picker
                  v-model="value2"
                  type="datetime"
                  placeholder="选择结束日期"
                  align="right"
                  :picker-options="pickerOptions"
                >
                </el-date-picker>
              </div>
            </el-form-item>
            <el-form-item class="d-flex" label="上线/下线" prop="resource">
              <el-radio-group v-model="ruleForm.resource">
                <el-radio label="上线"></el-radio>
                <el-radio label="下线"></el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="广告图片" required>
              <el-upload
                class="upload-demo t-left"
                ref="upload"
                action="/gym/uploadImage"
                :on-success="handleRemove"
                :image-list="fileList"
                :auto-upload="true"
                name="image"
              >
                <p>
                  <el-button slot="trigger" size="small" type="primary"
                    >选取文件</el-button
                  >
                </p>
                <div slot="tip" class="el-upload__tip">
                  只能上传jpg/png文件，且不超过500kb
                </div>
              </el-upload>
              <!-- <el-upload
                class="upload-demo t-left"
                action="https://jsonplaceholder.typicode.com/posts/"
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :before-remove="beforeRemove"
                multiple
                :limit="3"
                :on-exceed="handleExceed"
                :file-list="fileList"
              >
                <el-button size="small" type="primary">选择文件</el-button>
                <div slot="tip" class="el-upload__tip">
                  只能上传jpg/png文件，且不超过500kb
                </div>
              </el-upload> -->
            </el-form-item>
            <el-form-item class="d-flex" label="广告链接" prop="desc">
              <el-select v-model="value" placeholder="广告链接">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="广告备注" prop="desc">
              <el-input type="textarea" v-model="ruleForm.desc"></el-input>
            </el-form-item>
            <el-form-item>
              <!-- <el-button
              style="margin-left: 10px"
              size="small"
              type="success"
              @click="submitUpload"
              >上传到服务器</el-button
            > -->
              <el-button :plain="true" type="primary" @click="tianjaiguanggao"
                >立即创建</el-button
              >
              <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </el-card>
  </div>
</template>
<script>
import moment from "moment";
moment.locale("zh-cn");
export default {
  data() {
    return {
      num:99,//点击数
      imgdizhi: [], //上传图片返回数据
      desc: "", //下拉框值
      value1: "", //开始时间的值
      value2: "", //结束时间的值
      value: "", //下拉框的值
      image: "", //图片名称
      //表格的值
      ruleForm: {
        name: "", //广告名称
        region: "", //广告位置

        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "上线", //上线下线的选择
        desc: "", //广告备注
      },
      // 下拉框的值
      options: [
        {
          value: "https://www.baidu.com/s?ie=UTF-8&wd=baidufanyi",
          // label: "黄金糕",
        },
        {
          value: "https://element.eleme.cn/#/zh-CN/component/select",
          // label: "双皮奶",
        },
        {
          value: "https://github.com/Remix-Design/remixicon#usage",
          // label: "蚵仔煎",
        },
        {
          value: "https://fanyi.baidu.com/home",
          // label: "龙须面",
        },
        {
          value: "https://fanyi.baidu.com/appdownload/download.html",
          // label: "北京烤鸭",
        },
      ],

      fileList: [], //图片上传
      rules: {
        name: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          { min: 0, max: 50, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        region: [
          { required: true, message: "请输入活动位置", trigger: "blur" },
        ],
        date1: [
          {
            type: "date",
            required: true,
            message: "请选择日期",
            trigger: "change",
          },
        ],
        date2: [
          {
            type: "date",
            required: true,
            message: "请选择时间",
            trigger: "change",
          },
        ],
        type: [
          {
            type: "array",
            required: true,
            message: "请至少选择一个活动性质",
            trigger: "change",
          },
        ],
        resource: [
          { required: true, message: "请选择活动资源", trigger: "change" },
        ],
        desc: [{ required: true, message: "请填写活动形式", trigger: "blur" }],
      },
      // 时间函数

      pickerOptions: {
        // disabledDate(time) {
        //   return time.getTime() > Date.now();
        // },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },
    };
  },
  methods: {
    // 创建确定按钮axios
    tianjaiguanggao() {
      console.log(this.image);
      this.value1 = moment(this.value1).format("x");
      this.value2 = moment(this.value2).format("x");
      this.ruleForm.resource = this.ruleForm.resource == "下线" ? 0 : 1;
      // console.log(this.ruleForm.name, 1);
      // console.log(this.ruleForm.region, 2);
      // console.log(this.value1, 3);
      // console.log(this.value2, 4);
      // console.log(this.ruleForm.resource, 5);
      // console.log(this.value, 8);
      // console.log(this.ruleForm.desc, 8);
      //  this.ruleForm.resource == "" ||
      if (
        this.ruleForm.name == "" ||
        this.value1 == "Invalid date" ||
        this.value2 == "Invalid date" ||
        this.ruleForm.region == "" ||
        this.value == "" ||
        this.ruleForm.desc == ""
      ) {
        // console.log(this.ruleForm.name == "", this.ruleForm.name, 1);
        // console.log(this.value1 == "Invalid date", this.value1, 2);
        // console.log(this.value2 == "Invalid date", 3);
        // console.log(this.ruleForm.region == "", this.ruleForm.region, 4);
        // console.log(this.ruleForm.resource, this.ruleForm.resource, 5);
        // console.log(this.value == "", this.value, 8);
        // console.log(this.ruleForm.desc == "", this.ruleForm.desc, 8);
        this.$message.error("不能有空字段");
      } else {
        this.$axios({
          url: "/gym/advertisement/insert",
          method: "post",
          data: {
            name: this.ruleForm.name,
            position: this.ruleForm.region,
            startTime: this.value1,
            endTime: this.value2,
            status: this.ruleForm.resource,
            link: this.value,
            remarks: this.ruleForm.desc,
            image: this.image,
            num:this.ruleForm.num
          },
        }).then((res) => {
          // console.log(res.data);
          if (
            (res.data.code >= 200 && res.data.code < 300) ||
            res.data.code == 304
          ) {
            this.$message({
              showClose: true,
              type: "success",
              message: "添加成功",
            });
            this.pickerOptions;
            this.ruleForm.name = " ";
            this.ruleForm.region = " ";
           
            this.value = " ";
            this.ruleForm.desc = " ";
            this.ruleForm.num="";
           
            this.clearUploadedImage();
            //  this.$router.go(0);
              this.ruleForm.resource = "上线";
            // console.log(1111);
            //  this.$message.error("删除失败");
          } else {
            this.$message.error("添加失败");
          }
        });
      }
    },

    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.ruleForm.name = " ";
      this.ruleForm.region = " ";
      this.value1 = " ";
      this.value2 = " ";
      this.ruleForm.resource = "上线";
      this.value = " ";
      this.ruleForm.desc = " ";
      this.clearUploadedImage();
    },
    // 图片上传
    // 上传到服务器
    // submitUpload() {
    //   this.$refs.upload.submit();
    //   // console.log(this.$refs.upload);
    // },
    handleRemove(response, file, fileList) {
      console.log(response.data);
       console.log(file);
        console.log(fileList);
      //console.log(fileList[0].response,11111122);
      //console.log(file,2222222)
      this.image = response.data;
      if (this.image == "") {
        this.$message.error("图片没有上传");
      }
    },
    // 删除图片列表
    clearUploadedImage() {
      this.$refs.upload.clearFiles();
    },
 
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },
    beforeRemove(file,) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    // 返回
    fanhui() {
      this.$router.push("advertising");
    },
  },
  // 创建前
  brforeCreate() {},
  // 创建后
  created() {},
  // 挂载前
  beforeMount() {
      //  this.submitUpload();
  },
  // 挂载后
  mounted() {
 
    // this.diji()
    // console.log(this.total);
  },
  // 数据更新前
  beforeUpdate() {},
  // 数据更新后
  updated() {},
  // 销毁前
  beforeDestroy() {},
  // 销毁后
  destroyed() {},
};
</script>

<style scoped lang="less">
// 角色管理导航
.datr {
  display: flex;
  align-items: center;
  width: 100%;
  height: 50px;
  background: linear-gradient(
    to right,
    rgba(17, 17, 17, 0.619),
    rgba(14, 13, 13, 0.251)
  );
  border-radius: 8px 8px 0px 0px;

  .ga {
    display: flex;
    align-items: center;
    width: 5px;
    height: 35px;
    background-color: rgba(0, 0, 255);
    // line-height: 50px;
    margin-left: 10px;
  }
  .chryu {
    display: inline-block;
    width: 80px;
    height: 50px;
    line-height: 50px;
    color: rgb(247, 245, 245);
    font-size: 17px;
    font-weight: bold;
  }
}
//表格导航栏css
.bigre {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: space-between;
  // justify-content:'center';
  line-height: 50px;
  background-color: rgba(175, 175, 175, 0.557);
  border-radius: 8px 8px 0px 0px;
  span {
    width: 80px;
    height: 50px;
    color: rgb(12, 3, 3);
  }
  p {
    width: 100px;
    height: 50px;
  }
}
// 中间编辑框
.biao {
  width: 500px;
}
// 上线下线的样式
.el-form {
  .el-form-item:nth-child(5) {
    /deep/ .el-form-item__content {
      margin-left: 0px !important;
    }
  }
}
.el-form {
  .el-form-item:nth-child(7) {
    /deep/ .el-form-item__content {
      margin-left: 0px !important;
    }
  }
}
</style>